<template>
  <BasicModal @register="register" :title="title" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
    <p style="color: red; margin-left: 20px"> 提示：请先选择需要打印模板 </p>
  </BasicModal>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'WorkCalendarModal',
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  const emit = defineEmits(['success', 'register', 'modifyfileName']);
  const { showMessage } = useMessage();
  let record = ref<any>();
  const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
    labelWidth: 120,
    schemas: [
      {
        label: '打印模板',
        field: 'fileName',
        component: 'Select',
        componentProps: {
          dictType: 'm8_fh_print_model',
          allowClear: true,
        },
        itemProps: { validateTrigger: 'blur' },
        required: true,
      },
    ],
    baseColProps: { lg: 24, md: 24 },
  });
  const [register, { closeModal, setModalProps }] = useModalInner(async (e) => {
    record.value = e;
    await resetFields();
  });
  let title = ref<string>('发货打印模板选择');

  // 保存数据
  async function handleSubmit() {
    try {
      const data = await validate();
      record.value.fileName = data.fileName;
      setTimeout(closeModal);
      emit('modifyfileName', record.value);
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage('您填写的信息有误，请根据提示修正。');
      }
      console.log('error', error);
    } finally {
      // setModalProps({ confirmLoading: false });
    }
  }
</script>
<style scoped>
  .ant-picker {
    width: 80%;
  }
</style>
